<template>
	<div class="head">
		<div class="head-container">
			<span class="head-title">ToDoList</span>
			<input type="text" placeholder="添加ToDo" v-focus v-model="text" @keydown.enter="onEnter" />
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  },
  methods: {
    onEnter() {
      this.$emit("my-event", this.text);
      this.text.length > 0 && this.addItem(this.text);
      this.text = "";
    }
  },
  props: {
    addItem: {
      type: Function,
      required: true
    }
  }
};
</script>

<style lang="less" scoped>
.head {
  height: 50px;
  background: rgba(47, 47, 47, 0.98);

  .head-container {
    width: 600px;
    margin: 0 auto;

    .head-title {
      float: left;
      width: 100px;
      line-height: 50px;
      color: #ddd;
      font-size: 24px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    input {
      float: right;
      width: 60%;
      height: 24px;
      margin-top: 12px;
      text-indent: 10px;
      border-radius: 5px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
        0 1px 6px rgba(0, 0, 0, 0.45) inset;
      border: none;
    }
  }
}
</style>

